$(function() {
    let id = location.search.split('=')[1]; // 获得id
    $.ajax({
        type: "get",
        url: "../lib/getitem.php",
        data: {
            id: id
        },
        dataType: "json",
        success: function(data) {
            let pic = JSON.parse(data.pic);
            let tempstr = `
            <div class="title-box">
                    <div class="container clear">
                        <h2 class="left">${data.title}</h2>
                        <div class="con clear">
                            <div class="left">
                                <span>|</span>
                                <a href="#">${data.title}</a>
                            </div>
                            <div class="right">
                                <a href="#">概述</a>
                                <span>|</span>
                                <a href="#">参数</a>
                                <span>|</span>
                                <a href="#">F码通道</a>
                                <span>|</span>
                                <a href="#">用户评价</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="buy-box">
                    <div class="container clear">
                        <div class="img left">
                            <div class="img-con">
                                <div class="max-img small">
                                     <img src="..${pic[1].src}">
                                     <div class="hide6 movebox"></div>
                                </div>
                                <div class="hide6 big">
                                    <img src="..${pic[1].src}" class="bigpic">
                                </div>
                                <div class="btn">
                                    <div class="clear">
                                        <a href="#" target="_self">1</a>
                                        <a href="#" target="_self">2</a>
                                        <a href="#" target="_self">3</a>
                                        <a href="#" target="_self">4</a>
                                        <a href="#" target="_self">5</a>
                                    </div>
                                    <div>
                                        <a href="#" target="_self" class="prev"></a>
                                        <a href="#" target="_self" class="next"></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="message left">
                            <h1>${data.title}</h1>
                            <p class="desc">${data.details}</p>
                            <div class="main">
                                <p>小米自营</p>
                                <span class="price">${data.price}</span><span>元</span>
                            </div>
                            <div class="address">
                                <div class="inner-add">
                                    <i class="iconfont icon-location"></i>
                                    <div class="box">
                                        <div class="address-info">
                                            <span>浙江</span>
                                            <span>杭州市</span>
                                            <span>上城区</span>
                                            <span>湖滨街道</span>
                                        </div>
                                        <span class="xiugai"> 修改 </span>
                                    </div>
                                    <span class="num">有现货  :</span>
                                    <span class="num">${data.num}</span>
                                </div>
                            </div>
                            <div class="add-price">
                                <ul>
                                    <li class="clear">${data.title}
                                    <span>${data.price}￥</span>
                                    </li>
                                    <li> 总计 :${data.price}</li>
                                </ul>
                            </div>
                            <ul>
                                <li>
                                    <input type="button" value="加入购物车" class="add">
                                    <input type="number" value="1" min="1" max="${data.num}" id="num">
                                </li>
                                <li>
                                    <a href="#">
                                        <i class="iconfont icon-gift"></i> 喜欢
                                    </a>
                                </li>
                            </ul>
                            <div class="news">
                                <span>
                                    <i class="iconfont icon-tool"></i>
                                    <em>小米自营</em>
                                </span>
                                <span>
                                    <i class="iconfont icon-tool"></i>
                                    <em>小米发货</em>
                                </span>
                                <span>
                                    <i class="iconfont icon-tool"></i>
                                    <em>7天无理由退货</em>
                                </span>
                                <span>
                                    <i class="iconfont icon-tool"></i>
                                    <em>运费说明</em>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            $('header').append(tempstr).find('.add').on('click', function() {
                addItem(data.id, data.price, $('#num').val());
            });
            $('.add').on('click', function() {
                location.href = '../html/shopcar.html';
            })
        }
    });

    function addItem(id, price, num) {
        var shop = cookie.get('shop'); //获取cookie
        var product = {
            id: id,
            price: price,
            num: num
        };

        if (shop) {
            shop = JSON.parse(shop);
            if (shop.some(elm => elm.id == id)) {
                shop.forEach(elm => {
                    elm.id == id ? elm.num = num : null;
                });
            } else {
                shop.push(product);
            }
        } else {
            shop = [];
            shop.push(product);
            console.log(product);
        }
        cookie.set('shop', JSON.stringify(shop), 1);

    }

});